<template>
  <b-container class="container">
    <b-row>
      <b-col sm="12">
        <el-form label-width="50px">
          <el-form-item label="标签">
            <el-checkbox-group v-model="selectedTags">
              <el-checkbox v-for="(tag, index) in tags" :label="tag" name="type" :key="index"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-form>
      </b-col>
    </b-row>
    <b-row>
      <b-col sm="12" md="6" v-for="(work, index) in filterWorks" :key="index">
        <a class="work" :href="work.link">
          <div class="work-left">
            <img v-if="work.shareImage" v-lazy="work.shareImage"/>
          </div>
          <div class="work-right">
            <h3>{{work.title}}</h3>
            <div>
              <el-tag class="tag" :type="['', 'success', 'info', 'warning', 'danger'][index]" v-for="(tag, index) in work.tags" :key="index">{{tag}}</el-tag>
            </div>
          </div>
        </a>
      </b-col>
    </b-row>
  </b-container>
</template>

<script>
import works from './config.js'
const workLists = works.map(work => {
  const { date, ...rest } = work
  const regx = /^(\d{4})(\d{2})(\d{2})/ig
  const [, year, month, day] = regx.exec(date)
  return {
    ...rest,
    date,
    year,
    month,
    day
  }
})
const tags = new Set()
workLists.forEach(work => {
  tags.add(...work.tags)
})
export default {
  name: 'App',
  data () {
    return {
      works: workLists,
      tags: Array.from(tags),
      selectedTags: []
    }
  },
  watch: {
    selectedTags (newVal) {
      console.log(newVal)
    }
  },
  computed: {
    filterWorks () {
      if (!this.selectedTags.length) return this.works
      return this.works.filter(work => {
        const { tags } = work
        for (let i = 0; i < tags.length; i++) {
          const tag = tags[i]
          if (this.selectedTags.indexOf(tag) > -1) return true
        }
        return false
      })
    }
  }
}
</script>

<style lang="scss">
.el-checkbox {
  margin-right: 15px!important;
}
.container {
  padding: 40px 0 ;
}
.work {
  display: flex;
  height: 150px;
  margin-bottom: 20px;
  box-shadow: 2px 2px 8px 2px #ccc;
  border-radius: 10px;
  box-sizing: border-box;
  padding: 0 10px 0 0;
  color: #000;
  text-decoration: none;
  &:hover,
  &:active {
    color: #000;
    text-decoration: none;
  }
  .work-left {
    border-radius: 10px 0 0 10px;
    overflow: hidden;
    flex: 0 0 150px;
    width: 150px;
    height: 150px;
    margin-right: 10px;
    background-color: rgba(#42b883, 0.5);
    border-right: 1px solid rgba(#ccc, 0.5);
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  .work-right {
    flex: 1;
    box-sizing: border-box;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    h3 {
      flex: 0 0 60px;
      font-size: 20px;
      line-height: 1.5;
      height: 60px;
      overflow: hidden;
      text-overflow: ellipsis;
      color: #42b883;
    }
    .tag  {
      margin-right: 4px;
      margin-bottom: 4px;
    }
  }
}
</style>
